<template>
  <div class="login_page">
    <div class="login_box">
      <div class="center_box">
        <!-- 登录&注册-->
        <div :class="{ login_form: true, rotate: tab == 2 }">
          <div :class="{ tabs: true, r180: reverse == 2 }">
            <div class="fl tab" @click="changetab(1)">
              <span :class="{ on: tab == 1 }">登录</span>
            </div>
            <div class="fl tab" @click="changetab(2)">
              <span :class="{ on: tab == 2 }">注册</span>
            </div>
          </div>

          <!-- 登录 -->
          <div class="form_body" v-if="reverse == 1">
            <form @submit.prevent="loginSubmit">
              <input
                type="text"
                v-model="loginData.username"
                placeholder="请输入用户名"
                autocomplete="off"
              />
              <input
                type="password"
                v-model="loginData.password"
                placeholder="请输入密码"
                autocomplete="off"
              />
              <div class="error_msg">{{ loginMessage }}</div>
              <input
                type="submit"
                v-if="subState"
                disabled="disabled"
                value="登录中···"
                class="btn"
              />
              <input
                type="submit"
                v-else
                value="登录"
                @submit="loginSubmit"
                class="btn"
              />
            </form>
          </div>

          <!-- 注册 -->
          <div class="form_body r180" v-if="reverse == 2">
            <form @submit.prevent="regSubmit">
              <input
                type="text"
                v-model="registerData.username"
                placeholder="请输入用户名"
                autocomplete="off"
              />
              <input
                type="password"
                v-model="registerData.password"
                placeholder="6-30位密码，可用数字/字母/符号组合"
                autocomplete="off"
              />
              <input
                type="password"
                v-model="registerData.repPassword"
                placeholder="确认密码"
              />
              <div class="error_msg">{{ regMessage }}</div>
              <input
                type="submit"
                v-if="subState"
                disabled="disabled"
                value="提交中···"
                class="btn"
              />
              <input type="submit" v-else value="注册" class="btn" />
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
import { isvalidUsername } from "@/utils/validate";
import {  getUserByUsername, register } from "@/api/auth";
export default {
  data() {
    return {
      tab: 1, // 高亮当前标签名
      reverse: 1, // 旋转 1 登录，2 注册
      loginMessage: "", 
      regMessage: "", 
      subState: false, //提交状态
      xieyi: false, 
      xieyiContent: null, 
      redirectURL: "http://localhost:3000", // 登录成功后重写向地址
      loginData: {
        username: "",
        password: "",
      },
      registerData: {
        username: "",
        password: "",
        repPassword: "",
        check: false,
      },
    };
  },
  async created() {
    if (this.$route.query.redirectURL) {
      this.redirectURL = this.$route.query.redirectURL;
    }
  },

  methods: {
    // 切换标签
    changetab(int) {
      this.tab = int;
      let _that = this;
      setTimeout(() => {
        this.reverse = int;
      }, 200);
    },

    loginSubmit() {
      if (this.subState) {
        return false;
      }
      if (!isvalidUsername(this.loginData.username)) {
        this.loginMessage = "请输入正确的用户名";
        return false;
      }
      if (this.loginData.password.length < 6) {
        this.loginMessage = "密码长度不能少于6位";
        return false;
      }
      this.subState = true;
      this.$store
        .dispatch("UserLogin", this.loginData)
        .then((response) => {
          const { code, message } = response;
          if (code === 20000) {
            // 跳转回来源页面
            window.location.href = this.redirectURL;
          } else {
            this.loginMessage = message;
          }
          this.subState = false;
        })
        .catch((error) => {
          this.subState = false;
          this.loginMessage = "系统繁忙，请稍后再试";
        });
    },

    // 提交注册
    async regSubmit() {
      if (this.subState) {
        return false;
      }
      if (!isvalidUsername(this.registerData.username)) {
        this.regMessage = "请输入4-30位用户名，中文，数字，字母，下划线";
        return false;
      }
      const { code, message, data } = await getUserByUsername(
        this.registerData.username
      );
      if (code != 20000) {
        this.regMessage = message;
        return false;
      }
      if (data) {
        this.regMessage = "用户名已经被注册，请重新输入用户名";
        return false;
      }

      if (
        this.registerData.password.length < 6 ||
        this.registerData.password.length > 30
      ) {
        this.regMessage = "请输入6-30位密码,区分大小写且不可有空格";
        return false;
      }

      if (this.registerData.password !== this.registerData.repPassword) {
        this.regMessage = "两次输入密码不一致";
        return false;
      }

      this.subState = true; // 提交中
      register(this.registerData)
        .then((response) => {
          this.subState = false;
          const { code, message } = response;
          if (code === 20000) {
            // 注册成功，切换登录页
            this.changetab(1);
            // 清空表单
            this.registerData = {};
            this.regMessage = "";
          } else {
            this.regMessage = message;
          }
        })
        .catch((error) => {
          this.subState = false;
          this.regMessage = "系统繁忙，请稍后重试";
        });
    },
  },
};
</script>
<style scoped>
.login_page .login_box {
  height: 650px;
  background: url(../../assets/image/login.jpg) no-repeat center center;
}
.login_page .login_box .center_box {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}

.login_page .login_form {
  width: 380px;
  position: absolute;
  top: 80px;
  left: 100px;
  border-radius: 6px;
  transition: all 0.8s;
  transform: perspective(600px);
}

.login_page .login_form.rotate {
  transform: rotateY(-180deg);
}
.login_page .form_body {
  background: #fff;
  padding: 0 30px 20px;
  border-radius: 0 0 6px 6px;
}
.login_page .form_body input[type="text"],
.login_page .form_body input[type="password"],
.login_page .form_body input[type="button"],
.login_page .form_body input[type="submit"] {
  width: 310px;
  height: 43px;
  padding-left: 10px;
  margin-top: 20px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid #ccc;
  outline: none;
}
.login_page .form_body input[type="text"].btn,
.login_page .form_body input[type="password"].btn,
.login_page .form_body input[type="button"].btn,
.login_page .form_body input[type="submit"].btn {
  background: #ff0000;
  width: 320px;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  margin-bottom: 20px;
}
.login_page .form_body .error_msg {
  width: 310px;
  color: #d51423;
  font-size: 12px;
}
.login_page .form_body .next_auto {
  font-size: 14px;
  color: #333;
}
.login_page .form_body .is_go {
  float: left;
  color: #ff0000;
  height: 18px;
  line-height: 18px;
  font-size: 14px;
  display: inline-block;
  padding: 0 10px;
  text-decoration: none;
}
.login_page .form_body .is_go:hover {
  text-decoration: underline;
}
.login_page .form_body .agree {
  font-size: 14px;
  color: #333;
  margin-top: 20px;
}
.login_page .form_body .agree a {
  color: #ff0000;
  text-decoration: none;
}
.login_page .form_body .agree a:hover {
  text-decoration: underline;
}
.fl {
  float: left;
}
.login_page .yzm_btn {
  width: 100px;
  height: 46px;
  position: absolute;
  left: 210px;
  top: 21px;
  line-height: 48px;
  border-radius: 0 6px 6px 0;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: none;
}
.login_page .login_footer {
  padding-bottom: 30px;
}
.login_page .login_footer p {
  text-align: center;
  font-size: 12px;
  color: #1e1e1e;
  margin-top: 20px;
}
.login_page .check {
  width: 14px;
  height: 14px;
  position: relative;
  top: -1px;
}
.login_page .img_box {
  height: 70px;
}
.login_page .img_box img {
  width: 70px;
  height: 70px;
  display: block;
  border-radius: 50%;
  margin: 0 auto;
}
.login_page .hellow_text {
  text-align: center;
  font-size: 14px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
.login_page .btn_box {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}
.login_page .btn_box li {
  float: left;
  width: 140px;
  text-align: center;
  line-height: 30px;
  margin: 20px 10px 0;
  border-radius: 6px;
}
.login_page .btn_box li a {
  display: block;
  background: whitesmoke;
  border-radius: 6px;
}
.login_page .btn_box li a:hover {
  color: #fff;
  text-decoration: none;
  background: skyblue;
}
.login_page .out_btn {
  display: inline-block;
  margin: 10px 0 0 100px;
  font-size: 16px;
  color: #333;
  width: 120px;
  line-height: 30px;
  text-align: center;
}
.login_page .out_btn:hover {
  text-decoration: none;
}
.login_page .prn_icon {
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
}
.login_page .tabs {
  height: 60px;
  line-height: 60px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #e6e6e6;
}
.login_page .tabs .tab {
  font-size: 18px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  line-height: 60px;
}
.login_page .tabs span {
  display: inline-block;
  height: 59px;
}
.login_page .tabs .on {
  border-bottom: 2px solid #ff0000;
  color: #ff0000;
}
.login_page .r180 {
  transform: rotateY(-180deg);
}
</style>

